<template>
  <div class="box">
    <div class="box1">
      <van-icon name="revoke" @click="TogoodsSearch" />
      <van-icon name="share-o" @click="Fenxiang"/>
    </div>
   
   <van-share-sheet
  v-model="showShare"
  title="立即分享给好友"
  :options="options"
/>






    <!-- 轮播图的插件 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in gallery" :key="item.id">
        <img :src="item.img_url" alt="" />
      </van-swipe-item>
    </van-swipe>

    <!-- 使用子组件 -->
    <AddToCart :chliddata="chliddata"></AddToCart>

    <div class="box2" v-html="goods_desc"></div>
    <!--这是是商品的描述信息  -->

    <!-- 使用相关商品的组件   将相关商品的数据传递到子组件中-->
    <XiangGuanGoods :goodsList="goodsList"></XiangGuanGoods>

    <!-- 这个是加入购物车的插件 -->
    <van-goods-action>
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="goodsnum" @click="ToCar"/>
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="display"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>

    <!-- 使用子组件  ,这个子组件是点击购物车后出现的效果 -->
    <div>
      <!-- 这个页面是加入购物车的组件  在Goodsdetails中进行注册 -->
      <van-sku
        v-model="show"
        :sku="sku"
        :goods="goods"
        :goods-id="goodsId"
        :hide-stock="sku.hide_stock"
        @buy-clicked="onBuyClicked"
        @add-cart="onAddCartClicked"
        ref="myref"
      />
      <!-- 想要获取购买的商品的数量需要使用在标签上添加 ref="myref"  下面在以this.$refs 来获取数据-->
      <!-- @buy-clicked="onBuyClicked"  点击购买的回调函数 -->
      <!--  @add-cart="onAddCartClicked"   点击加入购物车的回调函数-->
    </div>
  </div>
</template>

<script>
// 引入详情页面的请求
// addCarData是加入购物车的请求
// getGoodsCount 获取购物车的商品的数量
import {
  getDetail,
  addCarData,
  getGoodsCount,
  relatedData,
} from "@/utils/http";

// 引入商品的描述的组件
import AddToCart from "@/views/goodsdata/AddToCart.vue";

// 引入相关产品的组件
import XiangGuanGoods from "@/views/goodsdata/XiangGuanGoods.vue";

export default {
  name: "Goodsdetails",
  data() {
    return {
      gallery: [], //轮播图的数据
      goods_desc: "", //商品的描述

      chliddata: "", // 给子组件传递的数据
      goodsList: [], //相关产品的数据
      // 下面是加入购物车所需要的数据
      show: false,
      goodsnum: "", //代表添加到购物车中的商品的总数量
      goods: {
        picture: "", // 弹出的商品展示面板上当前商品的的缩略图
      }, //当前商品信息对象
      goodsId: "", // 当前商品的id
      sku: {
        // 商品数据
        // 数据结构见下方文档
        tree: [],
        price: "1.00", // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        hide_stock: false, // 是否隐藏剩余库存
      },
      id: "", // 产品id，来自productList的第一个数组项中的id
      badge: 0, // 当前购物车总的商品数量

      messageConfig: {
        // 数据结构见下方文档
      },


       showShare: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' },
        ],
      ],
    };
  },

  components: {
    // 注册子组件
    AddToCart,
    // 注册相关产品的组件
    XiangGuanGoods,
  },

  created() {
    // console.log(this.$route.query);  //这里就是这个商品的id
    // 使用商品的详情请求, 并将传入进来的数据当做参数
    getDetail(this.$route.query).then((res) => {
      console.log(res);
      this.chliddata = res.data.data; //向子组件中传递数据
      this.gallery = res.data.data.gallery; //轮播图的数据
      this.goods_desc = res.data.data.info.goods_desc; //商品的描述
      this.goods.picture = res.data.data.info.list_pic_url; //商品的缩略图
      this.sku.price = res.data.data.info.retail_price; //商品的价格
      this.sku.stock_num = res.data.data.info.goods_number; //商品总库存
      this.goodsId = res.data.data.info.id; //商品的id
      this.id = res.data.data.productList[0].id; //产品的id
    }),
      // 这个请求是获取购物车中商品的总数量的请求
      getGoodsCount().then((res) => {
        console.log(res);
        // 将购物车中的商品的总数量赋值给this.goodsnum
        this.goodsnum = res.data.data.cartTotal.goodsCount;
      });

    //  调用相关产品的接口  this.$route.query 就是传递进来的商品的id
    relatedData(this.$route.query).then((res) => {
      // console.log(res);
      this.goodsList = res.data.data.goodsList;
    });
  },
  methods: {

    Fenxiang(){  //这里是点击分享按钮,显示分享的页面
     this.showShare = true;
    },

   ToCar(){  //这个函数点击购物车,跳转到购物车页面
   this.$router.push('/car')
   },

    TogoodsSearch() {
      //点击返回按钮返回到上一个页面
      this.$router.go(-1);
      // console.log(this.$router);
    },

    display() {
      //这个是点击显示购物车的函数
      //  将购物车所有依赖的this.addToCart  修改为true
      this.show = true;
    },

    onBuyClicked() {
      //点击购买的回调函数
    },
    onAddCartClicked() {
      //点击加入购物车的回调函数
      //  console.log('点击加入购物车的回调函数');
      //  console.log(this.$refs.myref.getSkuData().selectedNum);

      addCarData({
        goodsId: this.goodsId, //商品的id
        productId: this.id, //产品的id
        number: this.$refs.myref.getSkuData().selectedNum, //购买商品的数量
      }).then((res) => {
        // console.log(res);
        // 判断res.data.errno的状态如果等于0 就表明添加购物车成功
        if (res.data.errno == 0) {
          // 第一步成功以后,隐藏加入购物车模块
          this.show = false;
          //  第二步获商品的总数量
          this.goodsnum = res.data.data.cartTotal.goodsCount;
          // 第三步可以给一个提示信息
          this.$toast({
            type: "success",
            message: "已加入购物车",
            duration: 1000,
          });
        }
      });
    },
  }, ///home/goodssearch
};
</script>

<style scoped lang='less'>
.box {
  .box1 {
    position: relative;
    display: flex;
    justify-content: space-between;
  }
  /deep/.van-icon-revoke {
    position: absolute;
    z-index: 100;
  }
  /deep/.van-icon-share-o {
    position: absolute;
    right: 0;
    z-index: 100;
  }
  /deep/.van-swipe {
    margin-top: -25px;
  }
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;

    img {
      width: 100%;
    }
  }
  .box2 {
    width: 100%;
    /deep/p {
      width: 100%;
    }
    /deep/img {
      width: 100%;
    }
  }
}
</style>